<script setup lang="ts">
import { IBox } from "./inter"
import { ref, unref, watch, computed,toRefs } from "vue"
import { useMousePressed, useMouse, useElementSize,useParentElement  } from "@vueuse/core"

const props = withDefaults(defineProps<IBox.ResizeDrawerProps>(), {
    direction: "bottom",
    visible:false,
    maxSize:"100%",
})

const emits = defineEmits<{"update:visible":[visible:boolean]}>()

const { direction,minSize,maxSize,size } = props;
//
const { visible:vis } = toRefs(props)

const visible = ref(unref(vis))
const isHorizontal = direction == 'left' || direction == 'right';
// 父对象
const parentEl = useParentElement()
//
const propName = isHorizontal ? 'width' : 'height'
const boxCss = `min-${propName}:${minSize || 'none'};max-${propName}:${maxSize || 'none'};`
const boxRef = ref<HTMLDivElement>();
// 当前鼠标的数据
const { x, y } = useMouse({ target: parentEl })
const { width: W, height: H } = useElementSize(boxRef);

let cv = 0;
let cs = 0;

const operateRef = ref<HTMLElement>()
const { pressed } = useMousePressed({ target: operateRef })
//
const boxSize = computed(() => {
    if (!unref(pressed)) { return isHorizontal ? unref(W) : unref(H) };
    const ev = isHorizontal ? unref(x) : unref(y);
    const sp = ['right','bottom'].includes(direction) ? -1 : 1
    const t = (ev - cv) * sp;
    return cs + t;
})

const boxStyle = computed(() => {
    const v = (unref(boxSize) || size) + 'px'
    const res = `${propName}:${v};${boxCss}`;
    return res;
})

watch(pressed, (v) => {
    const ev = isHorizontal ? unref(x) : unref(y);
    if (v) {
        cv = ev
        cs = isHorizontal ? unref(W) : unref(H)
    } else {
        cv = 0;
    }
})

watch(vis,(v) => {
    if(v != unref(visible)){
        visible.value = v;
    }
})

const close = () => {visible.value = false;emits("update:visible",false);}

const open = () => {visible.value = true;emits("update:visible",true);}

const exposeObj = {open,close,visible}

defineExpose(exposeObj)

</script>

<template>
    <div ref="boxRef" :class="['box-resize-drawer', direction,visible?'trans-show':'trans-hide']" absolute flex overflow-hidden :style="boxStyle">
        <div :class="['_line', direction]" relative z-99 op-50 hover-(backdrop-blur-md op-100) >
            <div ref="operateRef" flex items-center justify-center select-none lh-6 text-6 fw-bold hover-text-7 :class="[isHorizontal ? 'h-full w-4' : 'w-full h-4']">
                <b :class="[isHorizontal ? 'cursor-ew-resize' : 'cursor-ns-resize',' text-center']">• • • • • •</b>
            </div>
        </div>
        <div relative w-full h-full flex-1 >
            <slot v-bind:scope="exposeObj"></slot>
        </div>
    </div>
</template>

<style scoped>
.box-resize-drawer {
    transition-property: opacity,transform;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
    box-shadow:0px 0px 16px rgba(0, 0, 0, .22);
    &.left{
        flex-direction: row-reverse;
        height:100%;
        left:0;
        top:0;
        &.trans-show{
            transform: translateX(0);
            opacity: 1;
        }
        &.trans-hide{
            transform: translateX(-100%);
            opacity: 0;
        }
    }
    &.right{
        flex-direction: row;
        height:100%;
        right:0;
        top:0;
        &.trans-show{
            transform: translateX(0);
            opacity: 1;
        }
        &.trans-hide{
            transform: translateX(100%);
            opacity: 0;
        }
    }
    &.top{
        flex-direction: column-reverse;
        width:100%;
        top:0;
        left:0;
        &.trans-show{
            transform: translateY(0);
            opacity: 1;
        }
        &.trans-hide{
            transform: translateY(-100%);
            opacity: 0;
        }
    }
    &.bottom{
        flex-direction: column;
        width:100%;
        bottom:0;
        left:0;
        &.trans-show{
            transform: translateY(0);
            opacity: 1;
        }
        &.trans-hide{
            transform: translateY(100%);
            opacity: 0;
        }
    }
    >._line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        &.left,&.right {
          flex-direction: column;
            height: 100%;
            ._title {
              ._text{
                writing-mode: vertical-rl;
                text-orientation: upright;
                /* text-orientation: upright; // 将水平书写的字符自然布局（直排），包括垂直书写的文字（as well as the glyphs for vertical scripts）。注意这个关键字会导致所有字符被视为从左到右，也就是 direction 被强制设为 ltr */
                /* // text-orientation: mixed; // 默认值。顺时针旋转水平书写的字符 90°，将垂直书写的文字自然布局。 */
                /* // text-orientation :sideways; // 所有字符被布局为与水平方式一样，但是整行文本被顺时针旋转 90°。 */
              }
            }
        }

        &.top,&.bottom {
            width: 100%;
        }
    }
}
</style>